// 组件

import React from 'react'
import ReactDOM from 'react-dom'

// 1 创建函数组件
// const Hello = () => {
//   return (
//     <h1
//       onClick={() => console.log('666')}
//       onMouseEnter={() => console.log('鼠标进入')}
//     >
//       Hello React 组件
//     </h1>
//   )
// }

// const Hello = () => {
//   const handleClick = () => console.log('666')
//   const hanldeMouseMove = () => console.log('鼠标进入')

//   return (
//     <h1 onClick={handleClick} onMouseEnter={hanldeMouseMove}>
//       Hello React 组件
//     </h1>
//   )
// }

// 2 类组件
// class Hello extends React.Component {
//   render() {
//     return (
//       <>
//         <h1 onMouseEnter={() => console.log('鼠标进入')}>
//           Hello React 组件 -- 类组件
//         </h1>
//         <div onClick={() => console.log('666')}>123</div>
//       </>
//     )
//   }
// }

class Hello extends React.Component {
  handleClick() {
    console.log('666')
  }

  handleMouseMove() {
    console.log('鼠标进入')
  }

  render() {
    return (
      <>
        <h1 onMouseEnter={this.handleMouseMove}>Hello React 组件 -- 类组件</h1>
        <div onClick={this.handleClick}>123</div>
        <a
          href="http://itcast.cn/"
          onClick={e => {
            e.preventDefault()
            console.log('a 标签点击了')
          }}
        >
          传智教育
        </a>
      </>
    )
  }
}

// 渲染
ReactDOM.render(<Hello />, document.getElementById('root'))

// const el = <button onClick={() => console.log('值加1')}>+1</button>
// ReactDOM.render(el, document.getElementById('root'))
